<template>
  <div>
    <div class="top">
        <div class="top_left">
          <span class="textA">直流电源</span>/<span class="textB">拓扑展示</span>
        </div>
        <div class="top_right">
          <div class="box_A">A路</div>
          <div class="box_B">B路</div>
        </div>
    </div>
    <div id="scroll-container" style="position: relative;">
      <div class="bottom" ref="stageContainer"></div>
    </div>
  </div>
  

</template>
<script>
  import Konva from 'konva';
  import {getPowerinfor} from "@/api/index"
  export default {
    data() {
      return {
        isDragging: false, // 用于标记是否正在拖动
        lastPointerPos: null, // 记录上一次鼠标指针的位置
        Alist:{},
        Blist:{},
        // Alist:{id:11,state:"开启",branch:[
        //   {id: 1, deviceId: "001-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 2, deviceId: "001-2", deviceName: "汇聚分支2", deviceType: "汇聚分支",status:"故障",apower:102,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 3, deviceId: "001-3", deviceName: "汇聚分支3", deviceType: "汇聚分支",status:"在线",apower:103,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 4, deviceId: "001-4", deviceName: "汇聚分支4", deviceType: "汇聚分支",status:"在线",apower:104,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 5, deviceId: "001-5", deviceName: "汇聚分支5", deviceType: "汇聚分支",status:"离线",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 1, deviceId: "001-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 2, deviceId: "001-2", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"故障",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 3, deviceId: "001-3", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 4, deviceId: "001-4", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 5, deviceId: "001-5", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"离线",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 1, deviceId: "001-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 2, deviceId: "001-2", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"故障",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 3, deviceId: "001-3", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 4, deviceId: "001-4", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 5, deviceId: "001-5", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"离线",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 1, deviceId: "001-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 2, deviceId: "001-2", deviceName: "汇聚分支2", deviceType: "汇聚分支",status:"故障",apower:102,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 3, deviceId: "001-3", deviceName: "汇聚分支3", deviceType: "汇聚分支",status:"在线",apower:103,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 4, deviceId: "001-4", deviceName: "汇聚分支4", deviceType: "汇聚分支",status:"在线",apower:104,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 5, deviceId: "001-5", deviceName: "汇聚分支5", deviceType: "汇聚分支",status:"离线",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 1, deviceId: "001-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 2, deviceId: "001-2", deviceName: "汇聚分支2", deviceType: "汇聚分支",status:"故障",apower:102,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 3, deviceId: "001-3", deviceName: "汇聚分支3", deviceType: "汇聚分支",status:"在线",apower:103,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 4, deviceId: "001-4", deviceName: "汇聚分支4", deviceType: "汇聚分支",status:"在线",apower:104,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 5, deviceId: "001-5", deviceName: "汇聚分支5", deviceType: "汇聚分支",status:"离线",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 1, deviceId: "001-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 2, deviceId: "001-2", deviceName: "汇聚分支2", deviceType: "汇聚分支",status:"故障",apower:102,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 3, deviceId: "001-3", deviceName: "汇聚分支3", deviceType: "汇聚分支",status:"在线",apower:103,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 4, deviceId: "001-4", deviceName: "汇聚分支4", deviceType: "汇聚分支",status:"在线",apower:104,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 5, deviceId: "001-5", deviceName: "汇聚分支5", deviceType: "汇聚分支",status:"离线",apower:106,avoltage:"220v",acurrent:"0.2A",},
        // ]},
        // Blist:{id:22,state:"开启",branch:[
        //   {id: 8, deviceId: "002-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:111,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 9, deviceId: "002-2", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:112,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 10, deviceId: "002-3", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:113,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 11, deviceId: "002-4", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:114,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 12, deviceId: "002-5", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:115,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 8, deviceId: "002-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 9, deviceId: "002-2", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 10, deviceId: "002-3", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 11, deviceId: "002-4", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 12, deviceId: "002-5", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 8, deviceId: "002-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 9, deviceId: "002-2", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 10, deviceId: "002-3", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 11, deviceId: "002-4", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 12, deviceId: "002-5", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 8, deviceId: "002-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 9, deviceId: "002-2", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 10, deviceId: "002-3", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 11, deviceId: "002-4", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 12, deviceId: "002-5", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 1, deviceId: "001-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 2, deviceId: "001-2", deviceName: "汇聚分支2", deviceType: "汇聚分支",status:"故障",apower:102,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 3, deviceId: "001-3", deviceName: "汇聚分支3", deviceType: "汇聚分支",status:"在线",apower:103,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 4, deviceId: "001-4", deviceName: "汇聚分支4", deviceType: "汇聚分支",status:"在线",apower:104,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 5, deviceId: "001-5", deviceName: "汇聚分支5", deviceType: "汇聚分支",status:"离线",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 1, deviceId: "001-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 2, deviceId: "001-2", deviceName: "汇聚分支2", deviceType: "汇聚分支",status:"故障",apower:102,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 3, deviceId: "001-3", deviceName: "汇聚分支3", deviceType: "汇聚分支",status:"在线",apower:103,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 4, deviceId: "001-4", deviceName: "汇聚分支4", deviceType: "汇聚分支",status:"在线",apower:104,avoltage:"220v",acurrent:"0.2A",},
        //   // {id: 5, deviceId: "001-5", deviceName: "汇聚分支5", deviceType: "汇聚分支",status:"离线",apower:106,avoltage:"220v",acurrent:"0.2A",},
        // ]},
        scaleAgroup:0,
        halfHeightA:0,    //半高
        halfHeightB:0,    //半高
      }
    },
    mounted(){
      this.initStage();
      this.getData();
    },
    methods:{
      initStage() {
        this.stage = new Konva.Stage({
          container: this.$refs.stageContainer,
          width: window.innerWidth,
          height: window.innerHeight,
        });
        this.stage.draw();
      },
      getData(){
        getPowerinfor().then(resp => {
          this.Alist = resp.data.A;
          this.Blist = resp.data.B;
          this.$nextTick(() => {
            this.stage = new Konva.Stage({
              container: this.$refs.stageContainer,
              width: this.$refs.stageContainer.offsetWidth,
              height: this.$refs.stageContainer.offsetHeight,
              draggable: false
            });
            const layer = new Konva.Layer();
              // 创建一个主 Group 来管理所有元素
              const mainGroup = new Konva.Group();
              // 提取创建矩形和文本的函数
              const createRectAndText = (x, y, width, height, fill,textLeft, textRight, name) => {
                const rect = new Konva.Rect({
                  x,
                  y,
                  width,
                  height,
                  fill,
                  stroke: 'black',
                  strokeWidth: 2,
                  name,
                });
                const textLeftObj = new Konva.Text({
                  x: x + 5,
                  y: y + 5,
                  text: textLeft,
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black',
                  align: 'left',
                  textAlign: 'left',
                });
                const textRightObj = new Konva.Text({
                  x: x + width - 20,
                  y: y + height - 15,
                  text: textRight,
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black',
                  align: 'right',
                  textAlign: 'right',
                });
                //创建斜线
                const line = new Konva.Line({
                  points: [x + width, y, x, y + height],
                  stroke: 'black',
                  strokeWidth: 2,
                });
                layer.add(rect);
                layer.add(textLeftObj);
                layer.add(textRightObj);
                layer.add(line);
                // 创建一个组来管理矩形和文本
                const group = new Konva.Group();
                group.add(rect);
                group.add(textLeftObj);
                group.add(textRightObj);
                group.add(line);
                // 添加点击事件监听器
                rect.on('click', () => {
                  // this.handleDialog(name);
                });
                // return { rect, textObj };
                // layer.add(group);
                mainGroup.add(group);
                return group;
              };
              // 提取创建虚线矩形和文本的函数
              const createDashedRectAndText = (x, y, width, height, text, name) => {
                const rect = new Konva.Rect({
                  x,
                  y,
                  width,
                  height,
                  stroke: 'black',
                  strokeWidth: 2,
                  dash: [5, 3],
                  fill: 'transparent',
                  name,
                  draggable:true
                });
                const textObj = new Konva.Text({
                  x: x + 20,
                  y: y - 20,
                  text,
                  fontSize: 14,
                  fontFamily: 'Arial',
                  fill: 'black',
                  align: 'left'
                });
                // 创建一个组来管理虚线矩形和文本
                const group = new Konva.Group();
                group.add(rect);
                group.add(textObj);
                // layer.add(group);
                mainGroup.add(group);
                return group;
              };
              // 创建箭头函数
              const createArrow = (x, y, length, color, name) => {
                const arrow = new Konva.Arrow({
                  points: [x, y, x, y + length],
                  pointerLength: 10,
                  pointerWidth: 10,
                  fill: color,
                  stroke: color,
                  strokeWidth: 2,
                  name
                });
                // layer.add(arrow);
                return arrow;
              };
              // 创建实心圆函数
              const createCircle = (x, y, radius, fill, name) => {
                const circle = new Konva.Circle({
                  x,
                  y,
                  radius,
                  fill,
                  stroke: 'black',
                  strokeWidth: 2,
                  name
                });
                // layer.add(circle);
                return circle;
              };
              // 创建贯穿线函数
              const createLine = (x1, y1, x2, y2, stroke, strokeWidth, name) => {
                const line = new Konva.Line({
                  points: [x1, y1, x2, y2],
                  stroke,
                  strokeWidth,
                  name
                });
                // layer.add(line);
                return line;
              };
              const xSpacing = 60;
              const yStart = 40;
              const dcScreenCabinetWidth = 300; // 直流屏柜宽度
              const dcPowerCabinetWidth = 180; // 直流配电柜宽度
              const dcPowerCabinetHeight = 150; // 直流配电柜高度
              const dcScreenCabinetHeight = 100; // 直流屏柜高度
              const dcPowerACDCWidth = 130; //单独AC/DC配置
              const dcPowerACDCHeight = 90;
              const subComponentWidth = 35; // 子组件宽度
              const subComponentHeight = 35; // 子组件高度
              const subComponentSpacing = 20; // 子组件间隔
              // 进电线的位置和尺寸
              const inletWireWidth = 20;
              const inletWireHeight = 90;
              if (this.Alist) {
                // 创建 A 路相关元素的组
                const aGroup = new Konva.Group();
                // 绘制进电线 A 路
                const inletWireCircleA = createCircle(
                  xSpacing / 2,
                  yStart + (dcPowerCabinetHeight - inletWireHeight) / 2,
                  inletWireWidth / 2,
                  'green',
                  'inletWireCircleA'
                );
                aGroup.add(inletWireCircleA);
                const inletWireA = createArrow(
                  xSpacing / 2,
                  yStart + (dcPowerCabinetHeight - inletWireHeight) / 2 + inletWireWidth / 2,
                  inletWireHeight - inletWireWidth,
                  'green',
                  'inletWireA'
                );
                aGroup.add(inletWireA);
                // A路与箭头垂直的线
                // const verticalLineA = createLine(
                //   xSpacing / 2,
                //   yStart + dcPowerCabinetHeight - inletWireHeight / 2,
                //   xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3,
                //   yStart + dcPowerCabinetHeight - inletWireHeight / 2,
                //   'green',
                //   3,
                //   'verticalLineA'
                // );
                const verticalLineA_1 = createLine(
                  xSpacing / 2,
                  yStart + dcPowerCabinetHeight - inletWireHeight / 2,
                  xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 2,
                  yStart + dcPowerCabinetHeight - inletWireHeight / 2,
                  'green',
                  3,
                  'verticalLineA'
                );
                // 后半段线，宽度设置为1
                const verticalLineA_2 = createLine(
                  xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 2,
                  yStart + dcPowerCabinetHeight - inletWireHeight / 2,
                  // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100
                  xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3, 
                  yStart + dcPowerCabinetHeight - inletWireHeight / 2,
                  'green',
                  1,
                  'verticalLineA_2'
                );
                const cGroup = new Konva.Group();
                // aGroup.add(verticalLineA);
                cGroup.add(verticalLineA_1);
                cGroup.add(verticalLineA_2)
                // A路总开关
                const imageMainswitch = new Image();
                imageMainswitch.onload = () => {
                  // 图片加载完成后，更新 imagezongkai 变量
                  this.imagezongkai = imageMainswitch;
                  const aMainSwitchImage = new Konva.Image({
                    x: xSpacing + subComponentSpacing,
                    y: yStart+ subComponentSpacing + subComponentHeight*2-15,
                    image: this.imagezongkai, // 使用加载完成的图片对象
                    width: subComponentWidth*2,
                    height: subComponentHeight*2,
                    name: 'aMainSwitchImage',
                    // rotation:-90,
                    // draggable:true
                    // scaleX: -1  // 水平翻转
                  });
                  // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                  const whiteCover = new Konva.Rect({
                    x: xSpacing + subComponentSpacing,
                    y: yStart + subComponentSpacing + subComponentHeight * 2 - 15,
                    width: subComponentWidth * 2,
                    height: subComponentHeight * 2,
                    fill: 'white'
                  });
                  // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                  aGroup.add(whiteCover);
                  aGroup.add(aMainSwitchImage);
                  // 重新绘制 layer 和 stage
                  layer.draw();
                  this.stage.draw();
                };
                imageMainswitch.src = require("@/assets/openswitch.png");
                // 创建一个 Konva.Text 对象来显示开关名称
                const switchNameText = new Konva.Text({
                  x: xSpacing + subComponentSpacing,
                  y: yStart + subComponentSpacing + subComponentHeight * 2 - 25, // 在开关上方显示
                  text: '100A/3P',
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                aGroup.add(switchNameText);
                //A路AC/DC
                const aRectifierModule = createRectAndText(
                  xSpacing + subComponentSpacing*5 + subComponentWidth*2,
                  yStart + dcPowerCabinetHeight - dcScreenCabinetHeight + subComponentSpacing,
                  // dcPowerCabinetWidth,
                  // dcScreenCabinetHeight,
                  dcPowerACDCWidth,
                  dcPowerACDCHeight,
                  'white',
                  'AC',
                  'DC',
                  'aRectifierModule'
                );
                aGroup.add(aRectifierModule);
                // 创建一个 Konva.Text 对象来显示名称
                const rectifierModuleName = new Konva.Text({
                  x: xSpacing + subComponentSpacing * 5 + subComponentWidth*2, // 与 aRectifierModule 相同的 x 坐标
                  y: yStart + dcPowerCabinetHeight - dcScreenCabinetHeight + subComponentSpacing - 20, // 在 aRectifierModule 上方适当位置
                  text: '48/600A直流电源', // 这里替换为你想要显示的实际名称
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                aGroup.add(rectifierModuleName);
                const children = aRectifierModule.getChildren();
                const textAC = children[1];
                const textDC = children[2];
                if (textAC) {
                  // 调整 'AC' 文字的大小和位置
                  textAC.fontSize(20); // 设置字体大小为 20
                  textAC.x(textAC.x() + 10); // 向右移动 10 个单位
                  textAC.y(textAC.y() + 15);  // 向上移动 5 个单位
                }
                if (textDC) {
                  // 调整 'DC' 文字的大小和位置
                  textDC.fontSize(20); // 设置字体大小为 20
                  textDC.x(textDC.x()-25); // 向右移动 10 个单位
                  textDC.y(textDC.y() - 15);  // 向下移动 5 个单位
                }
                // 获取 aRectifierModule 的位置和尺寸信息
                const aRectifierX = aRectifierModule.children[0].x();
                const aRectifierY = aRectifierModule.children[0].y();
                const aRectifierWidth = aRectifierModule.children[0].width();
                const aRectifierHeight = aRectifierModule.children[0].height();

                // 向下引申的线
                const downLine = createLine(
                  aRectifierX + aRectifierWidth / 2, // 从矩形底部中间开始
                  aRectifierY + aRectifierHeight,
                  aRectifierX + aRectifierWidth / 2,
                  aRectifierY + aRectifierHeight + 50, // 向下延伸 50 像素
                  'black',
                  2,
                  'downLineFromRect'
                );
                // 右侧引申的线
                const rightLine = createLine(
                  aRectifierX + aRectifierWidth, // 从矩形右侧中间开始
                  aRectifierY + aRectifierHeight / 2,
                  aRectifierX + aRectifierWidth + 50, // 向右延伸 50 像素
                  aRectifierY + aRectifierHeight / 2,
                  'black',
                  2,
                  'rightLineFromRect'
                );
                // 右侧引申线再向下延伸的线
                const rightDownLine = createLine(
                  aRectifierX + aRectifierWidth + 50, // 从右侧引申线的末端开始
                  aRectifierY + aRectifierHeight / 2,
                  aRectifierX + aRectifierWidth + 50,
                  aRectifierY + aRectifierHeight + 50, // 向下延伸到和向下引申线相同的高度
                  'black',
                  2,
                  'rightDownLineFromRect'
                );
                //引申地线
                const connectLine = createLine(
                  aRectifierX + aRectifierWidth / 2,
                  aRectifierY + aRectifierHeight + 50,
                  aRectifierX + aRectifierWidth + 50,
                  aRectifierY + aRectifierHeight + 50,
                  'black',
                  2,
                  'connectLine'
                );
                const lineMidX = (aRectifierX + aRectifierWidth / 2 + aRectifierX + aRectifierWidth + 50) / 2;
                const lineMidY = aRectifierY + aRectifierHeight + 50;
                const imageOnLine  = new Image();
                imageOnLine.onload = () => {
                  const konvaImage = new Konva.Image({
                    x: lineMidX + 5, // 根据图片大小调整位置
                    y: lineMidY - 25, // 根据图片大小调整位置
                    image: imageOnLine,
                    width: 50, // 图片宽度
                    height: 50, // 图片高度
                    name: 'imageOnLine',
                  });
                  // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                  const whiteCover = new Konva.Rect({
                    x: lineMidX + 5,
                    y: lineMidY - 20,
                    width: 40,
                    height: 40,
                    fill: 'white'
                  });
                  // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                  aGroup.add(whiteCover);
                  aGroup.add(konvaImage);
                  layer.draw();
                };
                imageOnLine.src = require("@/assets/ground.png");
                aGroup.add(downLine);
                aGroup.add(rightLine);
                aGroup.add(rightDownLine);
                aGroup.add(connectLine);
                // aGroup.add(imageOnLine);
                // A路汇聚终端
                const imageAterm = new Image();
                imageAterm.onload = () => {
                  // 图片加载完成后，更新 imagezongkai 变量
                  this.imageTerm = imageAterm;
                  const aTerminal = new Konva.Image({
                    x: xSpacing * 4 + dcScreenCabinetWidth - 35,
                    y: yStart + subComponentSpacing+subComponentHeight*2-15,
                    image: this.imageTerm, // 使用加载完成的图片对象
                    width: subComponentWidth*2,
                    height: subComponentHeight*2,
                    name: 'aTerminal',
                    // draggable:true
                  });
                  // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                  const whiteCover = new Konva.Rect({
                    x: xSpacing * 4 + dcScreenCabinetWidth - 35,
                    y: yStart + subComponentSpacing+subComponentHeight*2,
                    width: subComponentWidth * 2,
                    height: subComponentHeight * 2,
                    fill: 'white'
                  });
                  // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                  aGroup.add(whiteCover);
                  aGroup.add(aTerminal);
                  layer.draw();
                  this.stage.draw();
                };
                imageAterm.src = require("@/assets/openswitch.png");
                // 创建一个 Konva.Text 对象来显示名称
                const aTerminalName = new Konva.Text({
                  x: xSpacing * 4 + dcScreenCabinetWidth-35, // 与 aRectifierModule 相同的 x 坐标
                  y: yStart + subComponentSpacing+subComponentHeight+15, // 在 aRectifierModule 上方适当位置
                  text: 'DC 600A/2P', // 这里替换为你想要显示的实际名称
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                aGroup.add(aTerminalName);
                // A路直流输出总开关
                const imageAdcout = new Image();
                imageAdcout.onload = () => {
                  // 图片加载完成后，更新 imagezongkai 变量
                  this.imagezongkai = imageAdcout;
                  const aDCOutputSwitch = new Konva.Image({
                    x: xSpacing * 5 + dcScreenCabinetWidth + 25,
                    y: yStart + subComponentSpacing+subComponentHeight*2-19,
                    image: this.imagezongkai, // 使用加载完成的图片对象
                    width: subComponentWidth*2,
                    height: subComponentHeight*2,
                    name: 'aDCOutputSwitch',
                    draggable:true
                  });
                  // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                  const whiteCover = new Konva.Rect({
                    x: xSpacing * 5 + dcScreenCabinetWidth + 28,
                    y: yStart + subComponentSpacing+subComponentHeight*2,
                    width: subComponentWidth * 2-5,
                    height: subComponentHeight,
                    fill: 'white'
                  });
                  // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                  aGroup.add(whiteCover);
                  aGroup.add(aDCOutputSwitch);
                  // 重新绘制 layer 和 stage
                  layer.draw();
                  this.stage.draw();
                };
                imageAdcout.src = require("@/assets/switch.png");
                // 创建一个 Konva.Text 对象来显示名称
                const aDCOutputSwitchName = new Konva.Text({
                  x: xSpacing * 5 + dcScreenCabinetWidth+25, // 与 aRectifierModule 相同的 x 坐标
                  y: yStart + subComponentSpacing+subComponentHeight*2-15, // 在 aRectifierModule 上方适当位置
                  text: 'DC 600A/2P', // 这里替换为你想要显示的实际名称
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                aGroup.add(aDCOutputSwitchName);
                // 创建一个 Konva.Text 对象来显示名称
                const aDCOutputSwitchNamea = new Konva.Text({
                  x: xSpacing * 5 + dcScreenCabinetWidth+subComponentWidth, // 与 aRectifierModule 相同的 x 坐标
                  y: yStart + subComponentSpacing+subComponentHeight*2+35, // 在 aRectifierModule 上方适当位置
                  text: 'QF',
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                aGroup.add(aDCOutputSwitchNamea);
                //子开关之前的开关
                const imageSplitswitch = new Image();
                imageSplitswitch.onload = () => {
                  // 图片加载完成后，更新 imagezongkai 变量
                  this.imagezongkai = imageSplitswitch;
                  const aSplitSwitchImage = new Konva.Image({
                    x: xSpacing * 7 + dcScreenCabinetWidth + 30,
                    y: yStart+ subComponentSpacing+subComponentHeight*2-11,
                    image: this.imagezongkai, // 使用加载完成的图片对象
                    width: subComponentWidth*1.5,
                    height: subComponentHeight*1.5,
                    name: 'aSplitSwitchImage',
                    // rotation:-90,
                    // scaleX: -1  // 水平翻转
                  });
                  aGroup.add(aSplitSwitchImage);
                  // 重新绘制 layer 和 stage
                  layer.draw();
                  this.stage.draw();
                };
                imageSplitswitch.src = require("@/assets/device.png");
                // 创建一个 Konva.Text 对象来显示名称
                const aSplitSwitchImageName = new Konva.Text({
                  x: xSpacing * 7 + dcScreenCabinetWidth+25, // 与 aRectifierModule 相同的 x 坐标
                  y: yStart + subComponentSpacing+subComponentHeight*2-35, // 在 aRectifierModule 上方适当位置
                  text: '智能电量仪', // 这里替换为你想要显示的实际名称
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                aGroup.add(aSplitSwitchImageName);
                //从此处开始缩放
                 // 与 verticalLineA 垂直的线，从 verticalLineA 中点向下延伸 100 像素
                 // 创建 A 路缩放相关组
                const eGroup = new Konva.Group();
                 const verticalLineAMidX = xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3;
                const verticalLineAMidY = yStart + dcPowerCabinetHeight - inletWireHeight / 2;
                const perpendicularLineA = createLine(
                  verticalLineAMidX,
                  verticalLineAMidY-this.Alist.branch.length*8,
                  verticalLineAMidX,
                  verticalLineAMidY + this.Alist.branch.length*47,
                  'green',
                  2,
                  'perpendicularLineA'
                );
                eGroup.add(perpendicularLineA);
                //根据数组长度延伸对应条数的线
                if(this.Alist.branch){
                  const branchLength = this.Alist.branch.length;
                  const verticalLineAEndX = xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3;
                  const verticalLineAY = yStart + dcPowerCabinetHeight - inletWireHeight / 2-branchLength*3;
                  const lineSpacing = 50; // 引申线之间的间距
                  
                  const rectY = branchLength*60; // 计算条线占据高度
                  for (let i = 0; i < branchLength; i++) {
                    const newLine = createLine(
                      verticalLineAEndX,
                      verticalLineAY+ i * lineSpacing, 
                      verticalLineAEndX + 300, // 这里设置一个固定的延伸长度，你可以根据需要调整
                      verticalLineAY + i * lineSpacing,
                      'green',
                      1,
                      `rightExtendedLine${i}`
                    );
                    eGroup.add(newLine);
                    let imageSrc;
                    if (this.Alist.branch[i].status == "在线") {
                      imageSrc = require("@/assets/switch.png");
                    }else if(this.Alist.branch[i].status == "故障"){
                      imageSrc = require("@/assets/switch.png"); // 假设有关闭状态的图片
                    } else {
                      imageSrc = require("@/assets/switch.png"); // 假设有关闭状态的图片
                    }
                    const image = new Image();
                    image.onload = () => {
                      const lineImage = new Konva.Image({
                        x: verticalLineAEndX + 148, // 图片的 x 坐标，可以根据需要调整
                        y: verticalLineAY + i * lineSpacing - 25, // 图片的 y 坐标，可以根据需要调整
                        image: image,
                        width: subComponentWidth*1.5,
                        height: subComponentHeight*1.5,
                        name: `lineImage${i}`,
                      });
                      // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                      const whiteCoverA = new Konva.Rect({
                        x: verticalLineAEndX + 150,
                        y: verticalLineAY + i * lineSpacing - 25,
                        width: subComponentWidth * 1.5-5,
                        height: subComponentHeight * 1.5,
                        fill: 'white'
                      });
                      // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                      eGroup.add(whiteCoverA);
                      const textA = new Konva.Text({
                        x: verticalLineAEndX + 150, // 文字的 x 坐标，与图片 x 坐标相同
                        y: verticalLineAY + i * lineSpacing - 17 - 10, // 文字的 y 坐标，在图片上方适当位置
                        text: this.Alist.branch[i].deviceType, // 要显示的文字
                        fontSize: 12, // 文字大小
                        fill: 'black' // 文字颜色
                      });
                      const textA_1 = new Konva.Text({
                        x: verticalLineAEndX + 150, // 文字的 x 坐标，与图片 x 坐标相同
                        y: verticalLineAY + i * lineSpacing + 10, // 文字的 y 坐标，在图片上方适当位置
                        text: "QF", // 要显示的文字
                        fontSize: 8, // 文字大小
                        fill: 'black' // 文字颜色
                      });
                      eGroup.add(lineImage);
                      aGroup.add(eGroup);
                      eGroup.add(textA); // 将文字添加到 eGroup 中
                      eGroup.add(textA_1);
                      layer.draw();
                      this.stage.draw();
                    };
                    image.src = imageSrc;
                     // 创建表格
                    const tableWidth = 420; // 表格宽度
                    const tableHeight = this.Alist.branch.length * 20; // 根据 A 路分支数量动态设置表格高度
                    const tableX = verticalLineAEndX + 300; // 表格的 x 坐标，放置在线的末端
                    const tableY = verticalLineAY-70; // 表格的 y 坐标
                    // / 表格的行数和列数
                    const rows = this.Alist.branch.length+1; // 行数根据 A 路分支数量确定
                    const cols = 6;
                    // 单元格的宽度和高度
                    const cellWidth = tableWidth / cols;
                    const cellHeight = 50; // 固定单元格高度
                    // 创建一个组来管理表格元素
                    const tableGroup = new Konva.Group();
                    // 第一行（表头）
                    for (let col = 0; col < cols; col++) {
                      const cellX = tableX + col * cellWidth;
                      const cellY = tableY;
                      // 创建表头单元格边框（矩形）
                      const cellRect = new Konva.Rect({
                        x: cellX,
                        y: cellY,
                        width: cellWidth,
                        height: cellHeight,
                        stroke: 'black',
                        strokeWidth: 1,
                        name: `tableCellRect_0_${col}`
                      });
                      // 表头的文本内容
                      let cellTextContent = '';
                      if (col === 0) {
                        cellTextContent = '设备编号';
                      } else if (col === 1) {
                        cellTextContent = '设备名称';
                      }else if (col === 1) {
                        cellTextContent = '电压';
                      }else if (col === 1) {
                        cellTextContent = '电流';
                      }else if (col === 1) {
                        cellTextContent = '功率';
                      }else if (col === 1) {
                        cellTextContent = '状态';
                      }
                      // 创建表头单元格中的文本
                      const cellText = new Konva.Text({
                        x: cellX + 5,
                        y: cellY + 5,
                        text: cellTextContent,
                        fontSize: 10,
                        fontFamily: 'Arial',
                        fill: 'black',
                        align: 'center', // 水平居中
                        textAlign: 'center', // 文本内容水平居中
                        verticalAlign: 'middle', // 垂直居中
                        width: cellWidth, // 设置文本宽度与单元格宽度相同
                        height: cellHeight, // 设置文本高度与单元格高度相同
                        name: `tableCellText_0_${col}`
                      });
                      tableGroup.add(cellRect);
                      tableGroup.add(cellText);
                    }
                    // 从第二行开始填充数据
                    this.Alist.branch.forEach((branch, row) => {
                      for (let col = 0; col < cols; col++) {
                        const cellX = tableX + col * cellWidth;
                        const cellY = tableY + (row + 1) * cellHeight; // 注意这里的 row + 1，因为表头占了第一行
                        // 创建单元格边框（矩形）
                        const cellRect = new Konva.Rect({
                          x: cellX,
                          y: cellY,
                          width: cellWidth,
                          height: cellHeight,
                          stroke: 'black',
                          strokeWidth: 1,
                          name: `tableCellRect_${row + 1}_${col}`
                        });
                        // 根据列数填充不同的数据
                        let cellTextContent = '';
                        if (col === 0) {
                          cellTextContent = branch.deviceId;
                        } else if (col === 1) {
                          cellTextContent = branch.deviceName;
                        }
                        // 创建单元格中的文本
                        const cellText = new Konva.Text({
                          x: cellX + 5,
                          y: cellY + 5,
                          text: cellTextContent,
                          fontSize: 10,
                          fontFamily: 'Arial',
                          fill: 'black',
                          align: 'center', // 水平居中
                          textAlign: 'center', // 文本内容水平居中
                          verticalAlign: 'middle', // 垂直居中
                          width: cellWidth, // 设置文本宽度与单元格宽度相同
                          height: cellHeight, // 设置文本高度与单元格高度相同
                          name: `tableCellText_${row + 1}_${col}`
                        });
                        // 在每个单元格右侧新建矩形 显示对应的数据
                        const cellRightRectX = cellX + cellWidth;
                        const cellRightRectWidth = 80; // 右侧矩形的宽度
                        // 创建表格的函数
                        const createTable = (x, y, data) => {
                          const tableGroupA = new Konva.Group({
                            name: 'tableGroupA' // 添加类名
                          });
                          const rowHeight = 20;
                          const colWidth = cellRightRectWidth / 2;
                          // 表头
                          const headers = ['电压', '电流', '功率', '状态'];
                          headers.forEach((header, index) => {
                            const headerRect = new Konva.Rect({
                              x: x + index * colWidth+10,
                              y: y,
                              width: colWidth,
                              height: rowHeight,
                              stroke: 'black',
                              strokeWidth: 1,
                              fill: 'lightgray'
                            });
                            const headerText = new Konva.Text({
                              x: x + index * colWidth + 15,
                              y: y + 5,
                              text: header,
                              fontSize: 12,
                              fontFamily: 'Arial',
                              fill: 'black'
                            });
                            tableGroupA.add(headerRect);
                            tableGroupA.add(headerText);
                          });
                          // 数据行
                          const values = [data.avoltage, data.acurrent, data.apower, data.status];
                          values.forEach((value, index) => {
                            const dataRect = new Konva.Rect({
                              x: x + index * colWidth+10,
                              y: y + rowHeight,
                              width: colWidth,
                              height: rowHeight,
                              stroke: 'black',
                              strokeWidth: 1,
                              fill: 'white'
                            });
                            const dataText = new Konva.Text({
                              x: x + index * colWidth + 15,
                              y: y + rowHeight + 5,
                              text: value,
                              fontSize: 12,
                              fontFamily: 'Arial',
                              fill: 'black'
                            });
                            tableGroupA.add(dataRect);
                            tableGroupA.add(dataText);
                          });
                          return tableGroupA;
                        };
                        // 添加鼠标移入和移出事件监听器
                        if (col === 1) {
                          cellText.on('mouseenter', () => {
                            const table = createTable(cellRightRectX, cellY, branch);
                            eGroup.add(table)
                            layer.draw(); // 重新绘制图层以显示更新后的文本
                          });
                          cellText.on('mouseleave', () => {
                            const table = eGroup.findOne('.tableGroupA');
                            if (table) {
                              table.destroy();
                              layer.draw();
                            }
                          });
                        }
                        tableGroup.add(cellRect);
                        tableGroup.add(cellText);
                        // aGroup.add(cellRightRect);
                        // aGroup.add(cellRightText);
                      }
                    });
                    eGroup.add(tableGroup);
                    // 限制矩形框在A路的50%高度内
                    this.halfHeightA = this.stage.height() / 2-30;
                    if (rectY > this.halfHeightA) {
                      if(this.Alist.branch.length<10){ 
                        this.scaleAgroup = this.halfHeightA / rectY;
                        eGroup.scale({ x: 1, y: this.scaleAgroup });
                      }else if(this.Alist.branch.length >=10 && this.Alist.branch.length<15){ 
                        this.scaleAgroup = this.halfHeightA / rectY+0.03;
                        eGroup.scale({ x: 1, y: this.scaleAgroup });
                      }else if(this.Alist.branch.length >=15 && this.Alist.branch.length<20){
                          this.scaleAgroup = this.halfHeightA / rectY+0.05;
                          eGroup.scale({ x: 1, y: this.scaleAgroup});
                      }else if(this.Alist.branch.length >=20 && this.Alist.branch.length<25){
                          this.scaleAgroup = this.halfHeightA / rectY+0.05;
                          eGroup.scale({ x: 1, y: this.scaleAgroup});
                      }else{
                          this.scaleAgroup = this.halfHeightA / rectY+0.04;
                          eGroup.scale({ x: 1, y: this.scaleAgroup});
                      }
                    }                  
                  }
                }
                // 将 aGroup 添加到 mainGroup 中
                mainGroup.add(aGroup);
                mainGroup.add(cGroup);
                aGroup.moveToTop();
                layer.draw();
                this.stage.draw();
              }
              
              if (this.Blist) {
                // 创建 B 路相关元素的组
                const bGroup = new Konva.Group();
                // 绘制进电线 B 路
                const inletWireCircleB = createCircle(
                  xSpacing / 2,
                  this.stage.height() / 2 + 50 + (dcPowerCabinetHeight - inletWireHeight) / 2,
                  inletWireWidth / 2,
                  'blue',
                  'inletWireCircleB'
                );
                bGroup.add(inletWireCircleB);
                const inletWireB = createArrow(
                  xSpacing / 2,
                  this.stage.height() / 2 + 50 + (dcPowerCabinetHeight - inletWireHeight) / 2 + inletWireWidth / 2,
                  inletWireHeight - inletWireWidth,
                  'blue',
                  'inletWireB'
                );
                bGroup.add(inletWireB);
                // B路与箭头垂直的线
                const verticalLineB_1 = createLine(
                  xSpacing / 2,
                  this.stage.height() / 2 + 50 + dcPowerCabinetHeight - inletWireHeight / 2,
                  xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 2,
                  this.stage.height() / 2 + 50 + dcPowerCabinetHeight - inletWireHeight / 2,
                  'blue',
                  3,
                  'verticalLineB_1'
                );
                // 后半段线，宽度设置为1
                const verticalLineB_2 = createLine(
                  xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 2,
                  this.stage.height() / 2 + 50 + dcPowerCabinetHeight - inletWireHeight / 2,
                  // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100
                  xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3, 
                  this.stage.height() / 2 + 50 + dcPowerCabinetHeight - inletWireHeight / 2,
                  'blue',
                  1,
                  'verticalLineB_2'
                );
                const dGroup = new Konva.Group();
                dGroup.add(verticalLineB_1);
                dGroup.add(verticalLineB_2)
                // B路总开关
                const imageBMainswitch = new Image();
                imageBMainswitch.onload = () => {
                  // 图片加载完成后，更新 imagezongkai 变量
                  this.imagezongkai = imageBMainswitch;
                  const bMainSwitchImage = new Konva.Image({
                    x: xSpacing + subComponentSpacing,
                    y: this.stage.height() / 2 + 50 + subComponentSpacing + subComponentHeight*2-15,
                    image: this.imagezongkai, // 使用加载完成的图片对象
                    width: subComponentWidth*2,
                    height: subComponentHeight*2,
                    name: 'bMainSwitchImage',
                  });
                  // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                  const whiteCover = new Konva.Rect({
                    x: xSpacing + subComponentSpacing,
                    y: this.stage.height() / 2 + 50 + subComponentSpacing + subComponentHeight*2-15,
                    width: subComponentWidth * 2,
                    height: subComponentHeight * 2,
                    fill: 'white'
                  });
                  // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                  bGroup.add(whiteCover);
                  bGroup.add(bMainSwitchImage);
                  // 重新绘制 layer 和 stage
                  layer.draw();
                  this.stage.draw();
                };
                imageBMainswitch.src = require("@/assets/openswitch.png");
                // 创建一个 Konva.Text 对象来显示开关名称
                const switchNameText = new Konva.Text({
                  x: xSpacing + subComponentSpacing,
                  y: this.stage.height() / 2 + 50 + subComponentSpacing + subComponentHeight*2-25, // 在开关上方显示
                  text: '100A/3P',
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                bGroup.add(switchNameText); 
                //B路AC/DC
                const bRectifierModule = createRectAndText(
                  xSpacing + subComponentSpacing*5 + subComponentWidth*2,
                  this.stage.height() / 2 + 50 + dcPowerCabinetHeight - dcScreenCabinetHeight + subComponentSpacing,
                  dcPowerACDCWidth,
                  dcPowerACDCHeight,
                  'white',
                  'AC',
                  'DC',
                  'bRectifierModule'
                );
                bGroup.add(bRectifierModule);
                // 创建一个 Konva.Text 对象来显示开关名称
                const bRectifierModuleNameText = new Konva.Text({
                  x: xSpacing + subComponentSpacing*5 + subComponentWidth*2,
                  y: this.stage.height() / 2 + 50 +dcPowerCabinetHeight - dcScreenCabinetHeight + subComponentSpacing-20, // 在开关上方显示
                  text: '48/600A直流电源',
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                bGroup.add(bRectifierModuleNameText); 
                const children = bRectifierModule.getChildren();
                const textAC = children[1];
                const textDC = children[2];
                if (textAC) {
                  // 调整 'AC' 文字的大小和位置
                  textAC.fontSize(20); // 设置字体大小为 20
                  textAC.x(textAC.x() + 10); // 向右移动 10 个单位
                  textAC.y(textAC.y() + 15);  // 向上移动 5 个单位
                }
                if (textDC) {
                  // 调整 'DC' 文字的大小和位置
                  textDC.fontSize(20); // 设置字体大小为 20
                  textDC.x(textDC.x()-25); // 向右移动 10 个单位
                  textDC.y(textDC.y() - 15);  // 向下移动 5 个单位
                }
                // 获取 bRectifierModule 的位置和尺寸信息
                const bRectifierX = bRectifierModule.children[0].x();
                const bRectifierY = bRectifierModule.children[0].y();
                const bRectifierWidth = bRectifierModule.children[0].width();
                const bRectifierHeight = bRectifierModule.children[0].height();
                // 向下引申的线
                const downLine = createLine(
                  bRectifierX + bRectifierWidth / 2, // 从矩形底部中间开始
                  bRectifierY + bRectifierHeight,
                  bRectifierX + bRectifierWidth / 2,
                  bRectifierY + bRectifierHeight + 50, // 向下延伸 50 像素
                  'black',
                  2,
                  'downLineFromRect'
                );
                // 右侧引申的线
                const rightLine = createLine(
                  bRectifierX + bRectifierWidth, // 从矩形右侧中间开始
                  bRectifierY + bRectifierHeight / 2,
                  bRectifierX + bRectifierWidth + 50, // 向右延伸 50 像素
                  bRectifierY + bRectifierHeight / 2,
                  'black',
                  2,
                  'rightLineFromRect'
                );
                // 右侧引申线再向下延伸的线
                const rightDownLine = createLine(
                  bRectifierX + bRectifierWidth + 50, // 从右侧引申线的末端开始
                  bRectifierY + bRectifierHeight / 2,
                  bRectifierX + bRectifierWidth + 50,
                  bRectifierY + bRectifierHeight + 50, // 向下延伸到和向下引申线相同的高度
                  'black',
                  2,
                  'rightDownLineFromRect'
                );
                //引申地线
                const connectLine = createLine(
                  bRectifierX + bRectifierWidth / 2,
                  bRectifierY + bRectifierHeight + 50,
                  bRectifierX + bRectifierWidth + 50,
                  bRectifierY + bRectifierHeight + 50,
                  'black',
                  2,
                  'connectLine'
                );
                const lineMidX = (bRectifierX + bRectifierWidth / 2 + bRectifierX + bRectifierWidth + 50) / 2;
                const lineMidY = bRectifierY + bRectifierHeight + 50;
                const imageOnLine  = new Image();
                imageOnLine.onload = () => {
                  const konvaImage = new Konva.Image({
                    x: lineMidX + 5, // 根据图片大小调整位置
                    y: lineMidY - 25, // 根据图片大小调整位置
                    image: imageOnLine,
                    width: 50, // 图片宽度
                    height: 50, // 图片高度
                    name: 'imageOnLine',
                    // rotation:90
                  });
                  // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                  const whiteCover = new Konva.Rect({
                    x: lineMidX + 5,
                    y: lineMidY - 20,
                    width: 40,
                    height: 40,
                    fill: 'white'
                  });
                  // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                  bGroup.add(whiteCover);
                  bGroup.add(konvaImage);
                  layer.draw();
                };
                imageOnLine.src = require("@/assets/ground.png");
                bGroup.add(downLine);
                bGroup.add(rightLine);
                bGroup.add(rightDownLine);
                bGroup.add(connectLine);

                // B路汇聚终端
                const imageBterm = new Image();
                imageBterm.onload = () => {
                  this.imageBterm = imageBterm;
                  const bTerminal = new Konva.Image({
                    x: xSpacing * 4 + dcScreenCabinetWidth - 35,
                    y: this.stage.height() / 2+ 50 + subComponentSpacing+subComponentHeight+20,
                    image: this.imageBterm, // 使用加载完成的图片对象
                    width: subComponentWidth*2,
                    height: subComponentHeight*2,
                    name: 'bTerminal',
                    draggable:true
                  });
                  // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                  const whiteCover = new Konva.Rect({
                    x: xSpacing * 4 + dcScreenCabinetWidth-35,
                    y: this.stage.height() / 2+ 50 + subComponentSpacing+subComponentHeight+20,
                    width: subComponentWidth*2,
                    height: subComponentHeight*2,
                    fill: 'white'
                  });
                  // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                  bGroup.add(whiteCover);
                  bGroup.add(bTerminal);
                  layer.draw();
                  this.stage.draw();
                };
                imageBterm.src = require("@/assets/openswitch.png");
                // 创建一个 Konva.Text 对象来显示开关名称
                const bTerminalNameText = new Konva.Text({
                  x: xSpacing * 4 + dcScreenCabinetWidth-35,
                  y: this.stage.height() / 2 + 50 +subComponentSpacing+subComponentHeight+10, // 在开关上方显示
                  text: 'DC 600A/2P',
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                bGroup.add(bTerminalNameText); 
                // B路直流输出总开关
                const imageBdcout = new Image();
                imageBdcout.onload = () => {
                  this.imageBdcout = imageBdcout;
                  const bDCOutputSwitch = new Konva.Image({
                    x: xSpacing * 5 + dcScreenCabinetWidth + 21,
                    y: this.stage.height() / 2 + 50 + subComponentSpacing+subComponentHeight*2-18,
                    image: this.imageBdcout, // 使用加载完成的图片对象
                    width: subComponentWidth*2,
                    height: subComponentHeight*2,
                    name: 'bDCOutputSwitch',
                    draggable:true
                  });
                  // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                  const whiteCover = new Konva.Rect({
                    x: xSpacing * 5 + dcScreenCabinetWidth + 24,
                    y: this.stage.height() / 2+ 50 + subComponentSpacing+subComponentHeight*2-10,
                    width: subComponentWidth*2-5,
                    height: subComponentHeight,
                    fill: 'white'
                  });
                  // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                  bGroup.add(whiteCover);
                  bGroup.add(bDCOutputSwitch);
                  // 重新绘制 layer 和 stage
                  layer.draw();
                  this.stage.draw();
                };
                imageBdcout.src = require("@/assets/switch.png");
                // 创建一个 Konva.Text 对象来显示开关名称
                const bDCOutputSwitchNameText = new Konva.Text({
                  x: xSpacing * 5 + dcScreenCabinetWidth + 17,
                  y: this.stage.height() / 2 + 50 +subComponentSpacing+subComponentHeight*2-20, // 在开关上方显示
                  text: 'DC 600A/2P',
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                bGroup.add(bDCOutputSwitchNameText);
                // 创建一个 Konva.Text 对象来显示名称
                const bDCOutputSwitchNameTexta = new Konva.Text({
                  x: xSpacing * 5 + dcScreenCabinetWidth+subComponentWidth, // 与 aRectifierModule 相同的 x 坐标
                  y: this.stage.height() / 2 + 50 +subComponentSpacing+subComponentHeight*2+35, // 在 aRectifierModule 上方适当位置
                  text: 'QF',
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                bGroup.add(bDCOutputSwitchNameTexta);  
                //子开关之前的开关
                const imageSplitswitch = new Image();
                imageSplitswitch.onload = () => {
                  // 图片加载完成后，更新 imagezongkai 变量
                  this.imagezongkai = imageSplitswitch;
                  const bSplitSwitchImage = new Konva.Image({
                    x: xSpacing * 7 + dcScreenCabinetWidth + 30,
                    y: this.stage.height() / 2 + 50+ subComponentSpacing+subComponentHeight*2-11,
                    image: this.imagezongkai, // 使用加载完成的图片对象
                    width: subComponentWidth*1.5,
                    height: subComponentHeight*1.5,
                    name: 'bSplitSwitchImage',
                  });
                  bGroup.add(bSplitSwitchImage);
                  // 重新绘制 layer 和 stage
                  layer.draw();
                  this.stage.draw();
                };
                imageSplitswitch.src = require("@/assets/device.png"); 
                // 创建一个 Konva.Text 对象来显示开关名称
                const bSplitSwitchImageNameText = new Konva.Text({
                  x: xSpacing * 7 + dcScreenCabinetWidth + 30,
                  y: this.stage.height() / 2 + 50 +subComponentSpacing+subComponentHeight*2-35, // 在开关上方显示
                  text: '智能电量仪',
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                bGroup.add(bSplitSwitchImageNameText);  
               // 与 verticalLineB 垂直的线，从 verticalLineB 中点向下延伸 100 像素 
               // 创建 B 路缩放相关组
               const fGroup = new Konva.Group();
               const verticalLineAMidX = xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3;
                const verticalLineAMidY = this.stage.height() / 2 + 50 + dcPowerCabinetHeight - inletWireHeight / 2;
                const perpendicularLineB = createLine(
                  verticalLineAMidX,
                  verticalLineAMidY-this.Blist.branch.length*8,
                  verticalLineAMidX,
                  verticalLineAMidY + this.Blist.branch.length*47,
                  'blue',
                  2,
                  'perpendicularLineB'
                );
                fGroup.add(perpendicularLineB);   
                //根据数组长度延伸对应条数的线
                if(this.Blist.branch){
                  const branchLength = this.Blist.branch.length;
                  const verticalLineAEndX = xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3;
                  const verticalLineAY = this.stage.height() / 2 + 50 + dcPowerCabinetHeight - inletWireHeight / 2-branchLength*3;
                  const lineSpacing = 50; // 引申线之间的间距
                  const rectY = branchLength*60; // 计算条线占据高度
                  let totalScaleY = 1; // 用于记录总的缩放比例
                  for (let i = 0; i < branchLength; i++) {
                    const newLine = createLine(
                      verticalLineAEndX,
                      verticalLineAY+ i * lineSpacing, 
                      verticalLineAEndX + 300, // 这里设置一个固定的延伸长度，你可以根据需要调整
                      verticalLineAY + i * lineSpacing,
                      'blue',
                      1,
                      `rightExtendedLine${i}`
                    );
                    fGroup.add(newLine);
                    let imageSrc;
                    if (this.Blist.branch[i].status == "在线") {
                      imageSrc = require("@/assets/switch.png");
                    }else if(this.Blist.branch[i].status == "故障"){
                      imageSrc = require("@/assets/switch.png"); // 假设有关闭状态的图片
                    } else {
                      imageSrc = require("@/assets/switch.png"); // 假设有关闭状态的图片
                    }
                    const image = new Image();
                    image.onload = () => {
                      const lineImage = new Konva.Image({
                        x: verticalLineAEndX + 148, // 图片的 x 坐标，可以根据需要调整
                        y: verticalLineAY + i * lineSpacing - 25, // 图片的 y 坐标，可以根据需要调整
                        image: image,
                        width: subComponentWidth*1.5,
                        height: subComponentHeight*1.5,
                        name: `lineImage${i}`,
                      });
                      // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                      const whiteCoverB = new Konva.Rect({
                        x: verticalLineAEndX + 150,
                        y: verticalLineAY + i * lineSpacing - 16,
                        width: subComponentWidth * 1.5-5,
                        height: subComponentHeight * 1.5,
                        fill: 'white'
                      });
                      // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                      fGroup.add(whiteCoverB);
                      const textB = new Konva.Text({
                        x: verticalLineAEndX + 150, // 文字的 x 坐标，与图片 x 坐标相同
                        y: verticalLineAY + i * lineSpacing - 17 - 10, // 文字的 y 坐标，在图片上方适当位置
                        text: this.Blist.branch[i].deviceType, // 要显示的文字
                        fontSize: 12, // 文字大小
                        fill: 'black' // 文字颜色
                      });
                      const textB_1 = new Konva.Text({
                        x: verticalLineAEndX + 150, // 文字的 x 坐标，与图片 x 坐标相同
                        y: verticalLineAY + i * lineSpacing + 10, // 文字的 y 坐标，在图片上方适当位置
                        text: "QF", // 要显示的文字
                        fontSize: 8, // 文字大小
                        fill: 'black' // 文字颜色
                      });
                      fGroup.add(lineImage);
                      fGroup.add(textB);
                      fGroup.add(textB_1);
                      bGroup.add(fGroup);
                      layer.draw();
                      this.stage.draw();
                    };
                    image.src = imageSrc;
                     // 创建表格
                    const tableWidth = 200; // 表格宽度
                    const tableHeight = this.Blist.branch.length * 20; // 根据 A 路分支数量动态设置表格高度
                    const tableX = verticalLineAEndX + 300; // 表格的 x 坐标，放置在线的末端
                    const tableY = verticalLineAY-70; // 表格的 y 坐标
                    // / 表格的行数和列数
                    const rows = this.Blist.branch.length+1; // 行数根据 A 路分支数量确定
                    const cols = 2;
                    // 单元格的宽度和高度
                    const cellWidth = tableWidth / cols;
                    const cellHeight = 50; // 固定单元格高度
                    // 创建一个组来管理表格元素
                    const tableGroup = new Konva.Group();
                    // 第一行（表头）
                    for (let col = 0; col < cols; col++) {
                      const cellX = tableX + col * cellWidth;
                      const cellY = tableY;
                      // 创建表头单元格边框（矩形）
                      const cellRect = new Konva.Rect({
                        x: cellX,
                        y: cellY,
                        width: cellWidth,
                        height: cellHeight,
                        stroke: 'black',
                        strokeWidth: 1,
                        name: `tableCellRect_0_${col}`
                      });
                      // 表头的文本内容
                      let cellTextContent = '';
                      if (col === 0) {
                        cellTextContent = '设备编号';
                      } else if (col === 1) {
                        cellTextContent = '设备名称';
                      }
                      // 创建表头单元格中的文本
                      const cellText = new Konva.Text({
                        x: cellX + 5,
                        y: cellY + 5,
                        text: cellTextContent,
                        fontSize: 10,
                        fontFamily: 'Arial',
                        fill: 'black',
                        align: 'center', // 水平居中
                        textAlign: 'center', // 文本内容水平居中
                        verticalAlign: 'middle', // 垂直居中
                        width: cellWidth, // 设置文本宽度与单元格宽度相同
                        height: cellHeight, // 设置文本高度与单元格高度相同
                        name: `tableCellText_0_${col}`
                      });
                      tableGroup.add(cellRect);
                      tableGroup.add(cellText);
                    }
                    // 从第二行开始填充数据
                    this.Blist.branch.forEach((branch, row) => {
                      for (let col = 0; col < cols; col++) {
                        const cellX = tableX + col * cellWidth;
                        const cellY = tableY + (row + 1) * cellHeight; // 注意这里的 row + 1，因为表头占了第一行
                        // 创建单元格边框（矩形）
                        const cellRect = new Konva.Rect({
                          x: cellX,
                          y: cellY,
                          width: cellWidth,
                          height: cellHeight,
                          stroke: 'black',
                          strokeWidth: 1,
                          name: `tableCellRect_${row + 1}_${col}`
                        });
                        // 根据列数填充不同的数据
                        let cellTextContent = '';
                        if (col === 0) {
                          cellTextContent = branch.deviceId;
                        } else if (col === 1) {
                          cellTextContent = branch.deviceName;
                        }
                        // 创建单元格中的文本
                        const cellText = new Konva.Text({
                          x: cellX + 5,
                          y: cellY + 5,
                          text: cellTextContent,
                          fontSize: 10,
                          fontFamily: 'Arial',
                          fill: 'black',
                          align: 'center', // 水平居中
                          textAlign: 'center', // 文本内容水平居中
                          verticalAlign: 'middle', // 垂直居中
                          width: cellWidth, // 设置文本宽度与单元格宽度相同
                          height: cellHeight, // 设置文本高度与单元格高度相同
                          name: `tableCellText_${row + 1}_${col}`
                        });
                        // 在每个单元格右侧新建矩形 显示对应的数据
                        const cellRightRectX = cellX + cellWidth;
                        const cellRightRectWidth = 80; // 右侧矩形的宽度
                        // 创建表格的函数
                        const createTable = (x, y, data) => {
                          const tableGroupB = new Konva.Group({
                            name: 'tableGroupB' // 添加类名
                          });
                          const rowHeight = 20;
                          const colWidth = cellRightRectWidth / 2;
                          // 表头
                          const headers = ['电压', '电流', '功率', '状态'];
                          headers.forEach((header, index) => {
                            const headerRect = new Konva.Rect({
                              x: x + index * colWidth+10,
                              y: y,
                              width: colWidth,
                              height: rowHeight,
                              stroke: 'black',
                              strokeWidth: 1,
                              fill: 'lightgray'
                            });
                            const headerText = new Konva.Text({
                              x: x + index * colWidth + 15,
                              y: y + 5,
                              text: header,
                              fontSize: 12,
                              fontFamily: 'Arial',
                              fill: 'black'
                            });
                            tableGroupB.add(headerRect);
                            tableGroupB.add(headerText);
                          });
                          // 数据行
                          const values = [data.avoltage, data.acurrent, data.apower, data.status];
                          values.forEach((value, index) => {
                            const dataRect = new Konva.Rect({
                              x: x + index * colWidth+10,
                              y: y + rowHeight,
                              width: colWidth,
                              height: rowHeight,
                              stroke: 'black',
                              strokeWidth: 1,
                              fill: 'white'
                            });
                            const dataText = new Konva.Text({
                              x: x + index * colWidth + 15,
                              y: y + rowHeight + 5,
                              text: value,
                              fontSize: 12,
                              fontFamily: 'Arial',
                              fill: 'black'
                            });
                            tableGroupB.add(dataRect);
                            tableGroupB.add(dataText);
                          });
                          return tableGroupB;
                        };
                        // 添加鼠标移入和移出事件监听器
                        if (col === 1) {
                          cellText.on('mouseenter', () => {
                            const table = createTable(cellRightRectX, cellY, branch);
                            fGroup.add(table)
                            layer.draw(); // 重新绘制图层以显示更新后的文本
                          });
                          cellText.on('mouseleave', () => {
                            const table = fGroup.findOne('.tableGroupB');
                            if (table) {
                              table.destroy();
                              layer.draw();
                            }
                          });
                        }
                        tableGroup.add(cellRect);
                        tableGroup.add(cellText);
                        // bGroup.add(cellRightRect);
                        // bGroup.add(cellRightText);
                      }
                    });
                    fGroup.add(tableGroup);
                    // 限制矩形框在B路的50%高度内
                    // if (rectY > halfHeight) {
                    //   const scaleBgroup = halfHeight / rectY;
                    //   bGroup.scale({ x: 1, y: scaleBgroup});
                    //   dGroup.scale({ x: 1, y: scaleBgroup});
                    //   // break;
                    // } 
                    this.halfHeightB = this.stage.height() / 2+10; // 计算每路的高度（除去配电柜高度）
                    if (rectY > this.halfHeightB) {
                      const scaleBgroup = this.halfHeightB / rectY;
                      totalScaleY *= scaleBgroup; // 累积缩放比例
                      // 调整 bGroup 和 dGroup 的位置和缩放
                      const newY = this.halfHeightB - rectY * totalScaleY;
                      // 确保 newY 不会导致元素移出可视区域
                      const minY = 0; // 最小 y 坐标
                      const finalY = Math.max(minY, newY);
                      fGroup.y(finalY); // 调整 y 坐标以防止往上跑
                      fGroup.scale({ x: 1, y: totalScaleY });
                      // 确保缩放比例不会过小
                      const minScale = 0.1; // 最小缩放比例
                      if (totalScaleY <= this.scaleAgroup) {
                        totalScaleY = this.scaleAgroup;
                        // bGroup.scale({ x: 1, y: totalScaleY });
                        fGroup.scale({ x: 1, y: totalScaleY });
                      }
                    }else{
                      const scaleBgroup = this.halfHeightB / rectY;
                      totalScaleY *= scaleBgroup; // 累积缩放比例
                      // 调整 bGroup 和 dGroup 的位置和缩放
                      const newY = this.halfHeightB - rectY * totalScaleY;
                      // 确保 newY 不会导致元素移出可视区域
                      const minY = 0; // 最小 y 坐标
                      const finalY = Math.max(minY, newY);
                      fGroup.y(finalY); // 调整 y 坐标以防止往上跑
                      fGroup.scale({ x: 1, y: totalScaleY });
                      // 确保缩放比例不会过小
                      const minScale = 0.1; // 最小缩放比例
                      if (totalScaleY > this.scaleAgroup) {
                        if(this.scaleAgroup==0){
                          totalScaleY = 1;
                        }else{
                          totalScaleY = this.scaleAgroup;
                        }
                        // bGroup.scale({ x: 1, y: totalScaleY });
                        fGroup.scale({ x: 1, y: totalScaleY });
                      }
                      
                    }
                  }
                }                
                // 将 bGroup 添加到 mainGroup 中
                mainGroup.add(bGroup);
                mainGroup.add(dGroup);
                bGroup.moveToTop();
                layer.draw();
                this.stage.draw();
              }
              layer.add(mainGroup);
            this.stage.add(layer);
          layer.draw();
          this.stage.draw();
          // 鼠标按下事件
          this.stage.on('mousedown touchstart', (e) => {
            this.isDragging = true;
            this.lastPointerPos = this.stage.getPointerPosition();
          });

          // 鼠标移动事件
          this.stage.on('mousemove touchmove', (e) => {
            if (!this.isDragging) return;
            const pos = this.stage.getPointerPosition();
            const dx = pos.x - this.lastPointerPos.x;
            const dy = pos.y - this.lastPointerPos.y;
            this.stage.position({
              x: this.stage.position().x + dx,
              y: this.stage.position().y + dy
            });
            this.lastPointerPos = pos;
            this.stage.batchDraw();
          });
          // 鼠标抬起事件
          this.stage.on('mouseup touchend', () => {
            this.isDragging = false;
          });
          this.stage.on('wheel', (evt) => {
              const oldScale = this.stage.scaleX();
              const pointer = this.stage.getPointerPosition();
              const scaleBy = 1.1; // 缩放比例，1.1 表示每次缩放增加10%
              const mousePointTo = {
                x: (pointer.x - this.stage.x()) / oldScale,
                y: (pointer.y - this.stage.y()) / oldScale,
              }; // 将鼠标指针相对于画布的位置转换为相对于缩放后的画布位置
              const newScale = evt.evt.deltaY < 0 ? oldScale * scaleBy : oldScale / scaleBy; // 根据滚轮方向决定是放大还是缩小
              this.stage.scale({ x: newScale, y: newScale }); // 应用新的缩放比例
              this.stage.position({ // 保持鼠标指针在缩放后的位置上不变
                x: pointer.x - mousePointTo.x * newScale,
                y: pointer.y - mousePointTo.y * newScale,
              });
              this.stage.batchDraw(); // 刷新舞台以显示新的缩放状态
            });
          })
        }).catch(() => {
          // this.loading = false;
        });
      }
    }
  }
</script>
<style lang="scss" scoped>
.top{
  width: 100%;
    height: 63px;
   display: flex;
    font-size: 14px;
    justify-content: space-between;
      .top_left{
          width: 300px;
          height: 63px;
          line-height: 63px;
          .textA{
            font-weight: 400;
            color: #7E7E7E;
            margin-right: 5px;
          }
          .textB{
            font-weight: 400;
            color: #3579F6;
            margin-left: 5px;
          }
        }
      .top_right{
          width: 200px;
          height: 63px;
          display: flex;
          font-size: 20px;
          .box_A{
            width: 54px;
            height: 32px;
            margin: 15px 10px 0 0;
            line-height: 32px;
            text-align: center;
            background: #67CD78;
            border-radius: 2px;
          }
          .box_B{
            width: 54px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            margin-top: 15px;
            background: #1B6BFF;
            border-radius: 2px;
            margin-top: 15px;
          }
    }
}
#scroll-container {
  /* 设置为可滚动 */
  overflow: auto;
  width: 100% !important;
  height: 820px !important;
  // background-color: #7E7E7E;
}
.bottom{
  width: 100% !important;
  height: 800px !important; 
  // background-color: aquamarine; 
}
</style>